<template>
  <div class="bgimage" style="color: #fff;">

    <el-button type="primary" class="button-back" @click="Back()"
               style="width: 120px;margin-left: 90%;margin-top: 20px;" aria-label="Login Button">
      <span style="font-size: 24px;">Go Back</span>
    </el-button>

    <div class="login-container">
      <div style="width: 100%;">
        <h1>Stupid Cat Studio Register App</h1>
      </div>
      <div class="login-form">
        <h2>Welcome</h2>
        <div style="display: flex;">

          <form>
            <input type="text" class="text" v-model="admin.name" placeholder="name">
            <input type="text" :pattern="phoneRegex" class="text" v-model="admin.phone" placeholder="phone">
            <input type="text" class="text" v-model="admin.username" placeholder="username">
            <input type="password" class="text" v-model="admin.password" placeholder="password">
            <!-- <input type="text" class="text"  v-model="name" placeholder="name" value="name" onfocus="this.value = '';"
                onblur="if (this.value == '') {this.value = 'name';}">
            <input type="text" class="text" value="phone" onfocus="this.value = '';"
                onblur="if (this.value == '') {this.value = 'phone';}">
            <input type="text" class="text" value="username" onfocus="this.value = '';"
                onblur="if (this.value == '') {this.value = 'username';}">

            <input type="password" value="password" onfocus="this.value = '';"
                onblur="if (this.value == '') {this.value = 'password';}"> -->
            <input type="submit" @click="SignUp" value="Sign Up">
            <!-- <el-button type="success" @click="SignUp" round>成功按钮</el-button> -->
          </form>

        </div>

      </div>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      phoneRegex: /^1[3456789]\d{9}$/,
      admin: {
        name: '',
        username: '',
        phone: '',
        password: '',
      },
      // admin: [],
    };
  },
  methods: {
    SignUp() {
      if (this.phoneRegex.test(this.admin.phone)) {
        console.log(this.admin);
        this.$axios
            .post('admin/add', this.admin)
            .then(response => {
              let result = response.data;
              if (result.data == '添加成功') {
                this.$message({
                  message: result.data,
                  type: 'success'
                });
                this.$router.push('/');
              } else {
                this.$message({
                  message: result.data,
                  type: 'error'
                });
                this.admin = {};
              }
            })
            .catch(err => {
              alert(err);
            });
      } else {
        this.$message({
          message: "电话号码格式不正确",
          type: 'error'
        });

      }

    },
    Back() {
      this.$router.push('/');
    }
  }
};
</script>

<style scoped>
.text::placeholder {
  color: white;
}

.bgimage {
  font-family: Verdana;
  height: 100%;
  width: 100%;
  /*以下两种路径方式都可以*/
  /*background-image: url('../../../../assets/images/logo.png');*/
  background-image: url(../assets/registe.jpg);
  background-size: cover
}

.login-container {
  height: 700px;
  justify-content: center;
  align-items: center;

}

input[type="text"],
input[type="password"] {

  width: 441px;
  padding: 16px 16px 16px 16px;
  color: #fff;
  font-size: 18px;
  outline: none;
  background: none;
  font-weight: 100;
  border-radius: 50em;
  -webkit-border-radius: 50em;
  -moz-border-radius: 50em;
  -o-border-radius: 50em;
  -ms-border-radius: 50em;
  border: 1px solid#fff;
  display: block;
  margin: 0 auto 1em auto;
  text-align: center;
}

.button-login {
  margin-left: -40px;
  width: 100%;
  background: #00a651;
  border-color: #00a651;
  color: #fff;
}

input[type="submit"] {
  font-size: 28px;
  font-weight: 100;
  color: #fff;
  cursor: pointer;
  outline: none;
  padding: 12px 12px 12px 12px;
  width: 475px;
  background: #27ae61;
  border-radius: 50em;
  -webkit-border-radius: 50em;
  -moz-border-radius: 50em;
  -o-border-radius: 50em;
  -ms-border-radius: 50em;
  border: none;
  display: block;
  margin: 0px auto;
  text-align: center;
}

.button-back {

  height: 45px;
  padding: 0 10px;
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 45px;
  border: 0;
  border-radius: 2px;
  color: #fff;
  background: rgba(255, 255, 255, .33);

}

.login-form {
  min-height: 200px;
  width: 33.3333%;
  margin-bottom: 0;
  margin: 4% auto 0;
}

h1 {
  text-align: center;
  font-size: 3em;
  color: #fff;
}

h2 {
  text-align: center;
  font-weight: 100;
  font-size: 3em;
  color: #fff;
}

h3 {
  text-align: center;
  font-size: 18px;
  color: #ffffff;
  width: 88%;
  margin: 0 auto;
  font-weight: 100;
}
</style>

